@import "../variables";

textarea {
	width: 100%;
	height:34px;
	border: none;
	outline: none;
	border-bottom: 1px solid $input-border-color;
	&:focus {
		border-width: 2px;
		border-bottom-color: $input-border-highlight-color;
	}
}

.input-container {
	font-family: $font-family;
	font-size: $input-font-size;
	line-height: $input-line-height;
	height: $input-height;
	display: inline-block;
	position: relative;
	transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
	background-color: transparent;

	&.invalid hr, &.invalid hr.highlight {
		border-color: $alert-danger-border;
	}

	label {
		position: absolute;
		line-height: 22px;
		top: 38px;
		transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
		z-index: 1;
		cursor: text;
		transform: perspective(1px) scale(0.75) translate3d(0px, -28px, 0px);
		transform-origin: left top 0px;
		pointer-events: none;
		color: rgba(0, 0, 0, 0.298039);
		-webkit-user-select: none;
	}

	input.input {
		width: 100%;
		border: none;
		border-width: 0;
		outline: none;
		box-shadow: none;
		background-image: none;
		-webkit-appearance: none;
		background-image: none;

		&:read-only {
			color: #777;
		}
	}

	input, input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
		font-weight: $input-font-weight;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		padding: 0px;
		position: relative;
		width: 100%;
		border: none;
		border-width: 0!important;
		outline: none;
		box-shadow: none;
		background-image: none;
		-webkit-appearance: none;
		background-image: none;
		color: rgba(0, 0, 0, 0.870588);
		height: 100%;
		background-color: white;
		&::-webkit-input-placeholder {
			font-family: $font-family;
			font-weight: 100;
		}
	}

	hr {
		border-bottom-width: 1px;
		border-style: none none solid;
		border-color: $input-border-color;
		bottom: 8px;
		box-sizing: content-box;
		margin: 0px;
		position: absolute;
		width: 100%;
		&.highlight {
			border-bottom-width: 2px;
			border-color: $input-border-highlight-color;
			transform: scaleX(0);
			transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
		}
	}

	&.error hr {
		border-color: $alert-danger-border;
	}

	&.error, &.focused {
		hr.highlight {
			transform: scaleX(1);
		}
	}
}

